<template>
    <div class="all-order">
        <empty-notice v-if="realData.length == 0"></empty-notice>
        <div class="order-cards-list" :style="{height:clientHeight+'rem'}">
            <div class="order-card">
                <div class="card-detail" v-for="(item,index) in realData" :key="index">
                    <div class="order-num">
                        <div class="num">
                            <span>订单编号: </span>
                            <span>{{item['order_num']}}</span>
                        </div>
                        <div class="stantard">
                            <span>{{item['order_status']}}</span>
                        </div>
                    </div>
                    <div class="order-product-all">
                        <div class="product-img">
                            <img :src="item['image_url']" alt="">
                        </div>
                        <div class="product-msg">
                            <p>{{item.name}}</p>
                            <p>{{item.content}}</p>
                            <div class="product-price">
                                <span>￥{{item.price}}</span>
                                <span>x</span>
                                <span>{{item['number']}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="order-stantard">
                        <span>{{item['order_status']}}</span>
                        <span>￥{{item['pay_money']}}</span>
                    </div>
                    <div class="order-btns">
                        <div class="order-btn" v-if="item['order_status'] == '未付款'" @click="cancelOrder(item['order_num'])">
                            <span>取消订单</span>
                        </div>
                        <div class="order-btn" v-if="item['order_status'] == '未付款'" @click="toCreateOrder(item)">
                            <span>去付款</span>
                        </div>
                        <div class="order-btn" v-if="item['order_status'] == '已付款'" @click="remindDeliver(item['order_num'])">
                            <span>提醒发货</span>
                        </div>
                        <div class="order-btn" v-if="item['order_status'] == '交易完成'" @click="exchange(item['order_num'])">
                            <span>申请退换</span>
                        </div>
                        <div class="order-btn" v-if="item['order_status'] == '已发货'" @click="toExpress(item['express_num'])">
                            <span>查看物流</span>
                        </div>
                        <div class="order-btn" v-if="item['order_status'] == '已发货'"  @click="configGet(item['order_num'])">
                            <span>确认收货</span>
                        </div>
                        <div class="order-btn" v-if="item['order_status'] == '交易完成'" @click="toComment(item['order_num'],item['goods_id'])">
                            <span>商品评价</span>
                        </div>
                        <div class="order-btn" @click="toDetail(item['id'])">
                            <span>订单详情</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import virtualData from './virtual'
import orderCards from './orderCards'
import emptyNotice from './emptyNotice'

export default {
    name:'allOrder',
    data(){
        return {
            virtual:virtualData.allStoreList,
            realData:[],
            clientHeight:0,
            btn:'',
        }
    },
    methods:{
        getAllOrder(){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.orderList, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.realData = res.data['msg'];
                    that.transferUrl(that.realData);
                    that.transferStatus(that.realData);
                    console.log(that.realData);
                }
                loader.close();
            })
        },
        toComment(orderId, productId){
            this.$router.push({name:'comment', params:{orderId:orderId, productId:productId}});
        },
        toCreateOrder(item){
            sessionStorage.setItem('order', item['order_num']);
            this.$router.push('/create_order');
        },
        remindDeliver(id){
            // console.log(id);
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'post', that.$api.remindDeliver, {'order_num':id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('已提醒卖家发货！');
                }else{
                    that.toast(res.data['msg']);
                }
            })
        },
        exchange(id){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading('信息发送中...');
            that.$ajax(that, 'post', that.$api.exchange, {'order_num':id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('卖家会稍后联系您，请保持电话通畅！');
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            }) 
        },
        configGet(id){
           let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'post', that.$api.configGet, {'order_num':id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('确认收货成功！');
                }else{
                    that.toast(res.data['msg']);
                }
            })  
        },
        toExpress(id){
            this.$router.push({path:'/express', query:{expressId:id}});
        },
        toDetail(id){
            this.$router.push({path:'/order_detail', query:{orderId:id}});
        },
        cancelOrder(id){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'post', that.$api.cancelOrder, {'order_num':id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('订单取消成功');
                    that.getAllOrder();
                }else{
                    that.toast(res.data.msg);
                }
                loader.close();
            })
        }
    },
    mounted(){
        let scale = window.devicePixelRatio;
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = clientHeight*scale/100;
        this.getAllOrder();
    },
    activated(){
        let scale = window.devicePixelRatio;
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = clientHeight*scale/100;
        this.getAllOrder();
    },
    components:{
        orderCards,
        emptyNotice
    }
}
</script>

<style lang='less'>
@rem:100rem;

.all-order{
    width: 100%;
    margin-top: 90/@rem;
    margin-bottom: 10/@rem;
    background: #f0f0f0;
    .order-cards-list{
        overflow-y: scroll;
        padding-bottom: 30/@rem;
       .order-card{
            width: 100%;
            padding-bottom: 150/@rem;
            .card-detail{
                background: #ffffff;
                margin-top: 20/@rem;
                .order-num{
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 20/@rem;
                    height: 82/@rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1px solid #f0f0f0;
                }
                .order-product-all{
                    width: 710/@rem;
                    height: 242/@rem;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #f0f0f0;
                    .product-img{
                        width: 168/@rem;
                        height: 168/@rem;
                        img{
                            width: 168/@rem;
                            height: 168/@rem;
                        }
                    }
                    .product-msg{
                        text-align: start;
                        margin-left: 30/@rem;
                        p:nth-of-type(1){
                            width: 100%;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        p:nth-of-type(2){
                            font-size: 24/@rem;
                            color: #868686;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            margin-top: 24/@rem;
                        }
                        .product-price{
                            margin-top: 36/@rem;
                            span{
                                font-size: 28/@rem;
                            }
                            span:nth-of-type(2){
                                color: #868686;
                            }
                        }
                    }
                }
                .order-stantard{
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 20/@rem;
                    margin-top: 20/@rem;
                    display: flex;
                    justify-content: space-between;
                    span:nth-of-type(1){
                        color: #868686;
                    }
                    span:nth-of-type(2){
                        font-size: 28/@rem;
                        color: #fd4141;
                    }
                }
                .order-btns{
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 20/@rem;
                    display: flex;
                    justify-content: flex-end;
                    margin-top: 54/@rem;
                    padding-bottom: 20/@rem;
                    .order-btn{
                        width: 170/@rem;
                        height: 60/@rem;
                        line-height: 60/@rem;
                        border-radius: 6/@rem;
                        border: 2/@rem solid #e7e7e7;
                    }
                    .order-btn:active{
                        background: #ededed;
                    }
                    .order-btn{
                        margin:0 10/@rem;
                    }
                }
            }
        }
    }
}
</style>
